<template>
  <el-dialog
    :model-value="modelValue"
    title="添加用户及宠物信息"
    width="1000"
    destroy-on-close
    @update:model-value="$emit('update:modelValue', $event)"
  >
    <div class="container">
      <div class="form-item">
        <span class="form-item-label">姓名:</span>
        <div class="form-item-content">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </div>
      </div>
      <div class="form-item">
        <span class="form-item-label">手机号:</span>
        <div class="form-item-content">
          <el-input
            v-model="form.phone"
            placeholder="请输入手机号"
            style="width: 100%; text-align: left"
          />
        </div>
      </div>
      <div class="form-item">
        <span class="form-item-label">性别:</span>
        <div class="form-item-content">
          <el-select v-model="form.gender" placeholder="选择性别" style="width: 100%">
            <el-option v-for="item in ['男', '女']" :key="item" :label="item" :value="item" />
          </el-select>
        </div>
      </div>
      <div class="form-item">
        <span class="form-item-label">充值金额:</span>
        <div class="form-item-content">
          <el-input-number
            v-model="form.amount"
            :min="0"
            :controls="false"
            style="width: 100%"
            :precision="2"
          />
        </div>
      </div>
      <el-button type="primary" style="margin-top: 24px" @click="addPet">新增宠物</el-button>

      <div v-for="(pet, index) in pets" :key="index" class="pet-item">
        <div class="pet-item-row">
          <span class="pet-item-row-label">宠物类别:</span>
          <el-select v-model="pet.type" placeholder="请选择宠物类别" style="width: 150px">
            <el-option v-for="item in ['狗', '猫']" :key="item" :label="item" :value="item" />
          </el-select>
        </div>
        <div class="pet-item-row">
          <span class="pet-item-row-label">宠物名称:</span>
          <el-input v-model="pet.name" placeholder="请输入宠物名称" style="width: 150px"></el-input>
        </div>
        <div class="pet-item-row">
          <span class="pet-item-row-label">备注:</span>
          <el-input v-model="pet.attention" placeholder="备注" style="width: 200px"></el-input>
        </div>
        <el-icon style="cursor: pointer" @click="pets.splice(index, 1)"><Delete /></el-icon>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUsersStore } from '@/stores/index'
import { storeToRefs } from 'pinia'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
})
const emit = defineEmits(['update:modelValue'])
const userStore = useUsersStore()

const form = reactive({
  name: '',
  phone: '',
  gender: '',
  amount: 0
})

const formVerify = () => {
  if (form.name === '') {
    ElMessageBox.alert('姓名不能为空')
    return false
  }
  if (!form.phone) {
    ElMessageBox.alert('手机号不能为空')
    return false
  }
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(form.phone)) {
    ElMessageBox.alert('手机号格式不正确')
    return false
  }
  if (form.amount === 0) {
    ElMessageBox.alert('金额不能为0')
    return false
  }
  if (!pets.value.length) {
    ElMessageBox.alert('至少添加一个宠物')
    return false
  }
  if (
    pets.value.some((pet) => {
      return pet.type === '' || pet.name === ''
    })
  ) {
    ElMessageBox.alert('请将宠物信息补充完整')
    return false
  }
  return true
}

const pets = ref([])

const addPet = () => {
  pets.value.push({
    type: '', // 类别
    name: '', // 名称
    attention: '' // 备注
  })
}

const saveUserInfo = () => {
  const arrLength = userStore.userList?.length
  const data = {
    id: arrLength ? userStore.userList[0]?.id + 1 : 1,
    ...form,
    pets: toRaw(pets.value)
  }
  const userList = [...toRaw(userStore.userList)]
  userList.unshift(data)
  window.nodeApi?.saveUserList(userList).then((res) => {
    ElMessage({
      message: '保存成功',
      type: 'success'
    })
    userStore.userList = userList
  })
}

const handleConfirm = () => {
  const flag = formVerify()
  if (flag) {
    saveUserInfo()
    emit('update:modelValue', false) // 关闭弹窗
  }
}
</script>

<style lang="scss" scoped>
::v-deep(.el-dialog__body) {
  border: 1px solid red;
}
.container {
  width: 800px;
  .form-item {
    width: 600px;
    display: flex;
    margin-top: 24px;
    align-items: center;
    &-label {
      width: 150px;
      // font-size: 18px;
    }
    &-content {
      flex: 1;
      ::v-deep(.el-input-number) {
        .el-input__wrapper {
          .el-input__inner {
            text-align: left;
          }
        }
      }
    }
  }
  .pet-item {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-top: 24px;
    &-row {
      display: flex;
      align-items: center;
      &-label {
        width: 80px;
      }
    }
  }
}
</style>
